<template>
  <!-- 外部悬浮气泡 -->
  <div v-if="editor" >
    <!-- 需要使用到加粗/斜体/中横线/1、2、3级标题/字号设置/字体颜色设置/特殊块引用/ -->
    <el-row justify="center" class="AffixMenu">
      <el-button  @click="editor.chain().focus().undo().run()" :disabled="!editor.can().undo()" type="primary" plain size="small">
        <i class="ri-arrow-go-back-line"></i>
      </el-button>
      <el-button  @click="editor.chain().focus().redo().run()" :disabled="!editor.can().redo()" type="primary" plain size="small">
        <i class="ri-arrow-go-forward-line"></i>
      </el-button>
      <el-divider direction="vertical" />
      <!-- 关于字体 -->
      <el-button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" type="primary" plain size="small">
        <i class="ri-bold"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" type="primary" plain size="small">
        <i class="ri-italic"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" type="primary" plain size="small">
        <i class="ri-strikethrough"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }"  type="primary" plain size="small">
        <i class="ri-brush-2-line"></i>
      </el-button>

      <el-divider direction="vertical" />
      <!-- 关于段落 -->
      <el-button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
                 type="primary" plain size="small">
        <i class="ri-h-1"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
                 type="primary" plain size="small">
        <i class="ri-h-2"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
                 type="primary" plain size="small">
        <i class="ri-h-3"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" type="primary" plain size="small">
        <i class="ri-list-ordered"></i>
      </el-button>
      <el-button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" type="primary" plain size="small">
        <i class="ri-list-unordered"></i>
      </el-button>
      <el-button @click="editor.chain().focus().setHorizontalRule().run()" type="primary" plain size="small">
        <i class="ri-separator"></i>
      </el-button>
      <el-divider direction="vertical" />
      <!-- 清空与保存 -->
      <el-button type="danger" plain size="small" @click="editor.commands.clearContent(true)">清空</el-button>
      <el-button type="primary" plain size="small" @click="getEditor">保存</el-button>
      <el-button type="primary" plain size="small" @click="test">返回</el-button>
    </el-row>



  </div>

  <!-- 设置气泡菜单 -->
  <bubble-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor" class="menu_bubble">
    <!--  加粗  -->
      <el-button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" type="primary" plain size="small">
        <i class="ri-bold"></i>
      </el-button>

    <!--  斜体  -->
      <el-button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" type="primary" plain size="small">
        <i class="ri-italic"></i>
      </el-button>

    <!-- 完成 -->
      <el-button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" type="primary" plain size="small">
        <i class="ri-strikethrough"></i>
      </el-button>

    <!-- 内联代码 -->
      <el-button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }" type="primary" plain size="small">
        <i class="ri-code-view"></i>
      </el-button>

    <!-- 显示高亮 -->
      <el-button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" type="primary" plain size="small">
        <i class="ri-brush-2-line"></i>
      </el-button>
  </bubble-menu>

  <editor-content :editor="editor" style="border: 1px solid rosybrown;margin-top: 1%;border-radius: 15px"/>


</template>

<script setup>
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Typography from '@tiptap/extension-typography'
import Highlight from '@tiptap/extension-highlight'
import Document from '@tiptap/extension-document'
import {ref, watch} from "vue";
import {Placeholder} from "@tiptap/extension-placeholder";
import {SetNote} from "@/api/note";
import {ElMessage} from "element-plus";
import {NoteStatusStore, SparkAiStore} from "@/stores/counter";
import TextDialogEntry from "@/components/Note/SparkAi/TextDialogEntry.vue";
import router from '../../../router'
// 气泡菜单的响应式数据
const isEditable = ref(true)

const CustomDocument = Document.extend({
  content: 'heading block*',
})
const editor = useEditor({
  content: '<h1>It’ll always have a heading …</h1>' +
      '<p>… if you pass a custom document. That’s the beauty of having full control over the schema.</p>',
  extensions: [
    CustomDocument,
    Highlight.configure({ multicolor: true }),
    Placeholder.configure({
      placeholder: ({ node }) => {
        if (node.type.name === 'heading') {return '请输入标题'}
        return '？不输入嘛'
      }
    }),
    StarterKit.configure({
      document: false
    }),
    BubbleMenu,
    Typography,

  ],
})
// 检查气泡菜单响应式数据的变化
watch(isEditable, (isEditable) =>{
  console.log(isEditable);
  editor.value.setEditable(isEditable);}, {deep: true}
)
// 保存笔记
function getEditor() {
  SetNote(editor.value.getJSON()).then((res) => {
    console.log(res)
    let data = res.data.data
    if (data === '笔记创建成功'){
      ElMessage({showClose: true,message: data, type:"success"})
    }else {ElMessage({showClose: true,message: data, type:"error"})}
    let store = NoteStatusStore()
    store.noteStatus = 1
  })
}

// 
function test() {
  console.log("返回！");
  router.go(-1)
}
router.beforeEach((to, from) => {
  console.log(to, from);
})
</script>

<style scoped lang="scss">
.AffixMenu{
  border: 1px solid gold;
}
/* 内联代码块样式 */
.ProseMirror > * + * {
  margin-top: 0.75em;
}
.ProseMirror code {
  font-size: 0.9rem;
  padding: 0.25em;
  border-radius: 0.25em;
  background-color: rgba(97, 97, 97, 0.1);
  color: #616161;
  box-decoration-break: clone;
}
.ProseMirror ul,
.ProseMirror ol {
  padding: 0 1rem;
}

.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  line-height: 1.1;
}
.ProseMirror .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: #ced4da;
  pointer-events: none;
  height: 0;
}
</style>
